<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Sinwa图片直播 - 详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta content="email=no" name="format-detection"/>
    <link rel="stylesheet" type="text/css" href="./assert/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="./assert/css/main.css"/>
    <link rel="stylesheet" href="./assert/iconfont/iconfont.css">
    <link rel="shortcut icon" href="./favicon.ico">
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script src="./js/ws.js"></script>
    <script src="./js/char-push.js"></script>
    <script src="./js/char.js"></script>
    <style>
        /*详情界面保持上部分静止，下面滚动; 同样利用flex布局 poster自然高度， tab-nav自然高度， tab-block填满剩余部分*/
        .poster {
            position: relative;
        }

        .post-img {
            height: 30vh;
            width: 100%;
        }

        .poster-title {
            position: absolute;
            bottom: 0;
            display: flex;
            align-items: center;
            color: #fff;
            width: 100%;
            height: 80px;
            /*这里不要使用opacity属性，文字也会继承透明属性，使用rgpa*/
            background: rgba(0, 0, 0, 0.3);
        }

        .poster-title-team {
            flex: 1;
            text-align: center;
        }

        .poster-title-team img {
            border-radius: 50%;
        }

        /* ************************tab 切换******************************* */
        .tab-nav {
            display: flex;
            margin-top: 5px;
            padding: 5px 0;
            text-align: center;
        }

        .tab-nav > div {
            flex: 1;
            line-height: 2rem;
            font-size: 1.1rem;
            text-align: center;
            border-right: 1px solid #eee;
            padding-bottom: 2px;
        }

        .tab-nav > div:last-child {
            border: none;
        }

        .tab-nav > div.active {
            border-bottom: 2px solid #38f;
        }

        .tab-block {
            flex: 1;
            overflow-y: scroll;
        }

        /******************赛况 frame时间片段的意思*****************/
        .frame {
            padding: 5px;
        }

        /*加强时间icon的效果*/
        .frame .icon {
            font-weight: bold;
            margin-right: 5px;
        }

        .frame-header {
            font-size: 0.8rem;
            display: inline-block;
            padding: 2px 5px;
            background: red;
            color: #fff;
            border-radius: 10px;
        }

        .frame-item {
            position: relative;
            margin-left: 5px;
            border-left: 1px dotted #38f;
            padding: 20px 10px 0;
        }

        .frame-item > p {
            font-size: 1rem;
            color: #404040;
            padding: 5px 0;
        }

        .frame-dot {
            position: absolute;
            width: 6px;
            height: 6px;
            background: #38f;
            border-radius: 50%;
            left: -4px;
            top: 27px;
        }

        .frame-item-author {
            color: #888;
            font-size: 0.8rem;
            vertical-align: middle;
        }

        /* *************** 评论 ****************  */
        .comments {
            /*为评论输入框留位置，由于输入框是绝对定位*/
            padding-bottom: 50px;
        }

        .comment-form {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
        }

        .comment-form input {
            background: ghostwhite;
            border-top: 1px solid #eee;
            outline: none;
            padding: 5px 10px;
            width: 100%;
            height: 100%;
        }

        .comment {
            font-size: 1rem;
            line-height: 1.5rem;
            margin: 5px 10px;
        }

        .comment > span:first-child {
            color: #38f;
        }


        /*比赛数据*/
        .match-data {
            background: #eee;
        }

        .match-data > div {
            background: #fff;
            margin-bottom: 10px;
            padding: 10px;
        }

        .match-score {
            display: flex;
            flex-direction: row;
            align-items: center;
            text-align: center;
        }

        .match-team-info {
            flex: 1;
        }

        .match-team-info img {
            margin-bottom: 5px;
        }

        .match-score-result {
            flex: 3;
        }

        .match-score-result > div {
            margin: 5px 0;
        }

        .sub-title {
            font-size: 1.1rem;
            font-weight: bold;
        }

        .match-report-row {
            display: flex;
            height: 40px;
            line-height: 40px;
            text-align: center;
            align-items: center;
        }

        .match-report-row.row-title {
            border-bottom: 1px solid #eee;
            color: #888;
            font-size: .8rem;
        }

        .match-report-row span {
            flex: 1;
        }

        .match-report-row span:first-child {
            text-align: left;
        }

        .match-report-row span:last-child {
            text-align: right;
        }

        /* 本场最佳 */
        .mvp > div {
            margin: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .mvp-score {
            display: flex;
            font-size: 1.1rem;
            text-align: center;
            justify-content: space-between;
            align-items: center
        }

        .mvp-score span {
            margin: 0 10px;
        }

        .mvp-score-label {
            font-size: .8rem;
            color: #888;
        }

        .mvp-player {
            flex: 1;
            display: flex;
            align-items: center;
        }

        /*让第二个球员的信息，靠右*/
        .mvp-player:last-child {
            justify-content: flex-end;
        }

        .mvp-player-info {
            margin: 0 5px;
            font-size: .8rem;
            color: #888;
        }

        .mvp-player img {
            border-radius: 50%;
        }
    </style>
</head>

<body>
<header class="header xxl-font">
    <i class="icon iconfont icon-fanhui back" id="back"></i>
    马刺vs火箭赛况
    <!--用户处于登录状态时，将该按钮隐藏-->
    <a href="./login.html">
        <i class="icon iconfont icon-wode my"></i>
    </a>
</header>
<div class="content">
    <div class="poster">
        <img src="./imgs/match-poster.png" class="post-img"/>
        <div class="poster-title">
            <div class="poster-title-team">
                <img src="./imgs/team1.png" width="40px" height="40px">
                <div>马刺(50)</div>
            </div>
            <div>VS</div>
            <div class="poster-title-team">
                <img src="./imgs/team2.png" width="40px" height="40px">
                <div>火箭(52)</div>
            </div>
        </div>
    </div>
    <div class="tab-nav">
        <div class="active">赛况</div>
        <div>聊天室</div>
        <div>数据</div>
    </div>
    <div class="tab-block">
        <div id="match-result">
            <div class="frame">
                <h3 class="frame-header">
                    <i class="icon iconfont icon-shijian"></i>第一节 01：30
                </h3>
                <div class="frame-item">
                    <span class="frame-dot"></span>
                    <div class="frame-item-author">
                        <img src="./imgs/team1.png" width="20px" height="20px"/> 马刺
                    </div>
                    <p>08:44 暂停 常规暂停</p>
                    <p>08:44 帕克 犯规 个人犯规 2次</p>
                </div>
                <div class="frame-item">
                    <span class="frame-dot"></span>
                    <div class="frame-item-author">
                        singwa(评论员)
                    </div>
                    <p>01:44 </p>
                    <p>01:46 犯规 个人犯规 Ruan</p>
                </div>
            </div>
            <div class="frame">
                <h3 class="frame-header">
                    <i class="icon iconfont icon-shijian"></i>第二节 01：40
                </h3>
                <div class="frame-item">
                    <span class="frame-dot"></span>
                    <div class="frame-item-author">
                        <img src="./imgs/team2.png" width="20px" height="20px"/> 火箭
                    </div>
                    <p>比赛如火如荼~~~</p>
                    <p>
                        <img src="./imgs/1.png" width="40%"/>
                    </p>
                </div>
                <div class="frame-item">
                    <span class="frame-dot"></span>
                    <div class="frame-item-author">
                        singwa(评论员)
                    </div>
                    <p>08:44:41 火箭队请求暂停 常规暂停</p>
                    <p>08:44:40 哈登进攻犯规 个人犯规3次</p>
                </div>
            </div>
        </div>
        <div id="comments" class="hidden comments">
            <div class="comment">
                <span>xixi</span>
                <span>赞~</span>
            </div>
            <div class="comment">
                <span>xixi</span>
                <span>赞~哈登mvp</span>
            </div>
            <div class="comment">
                <span>singwa</span>
                <span>哈登+克里斯-保罗 必定能夺冠，加油火箭！</span>
            </div>
            <div class="comment">
                <span>mooc</span>
                <span>詹姆斯去火箭吧~</span>
            </div>
            <div class="comment">
                <span>singwa2</span>
                <span>这场比赛太精彩了</span>
            </div>
            <div class="comment">
                <span>singwa</span>
                <span> 火箭目前位列西部第一，在击败独行侠之后，他们已经领先勇士1.5个胜场，而马刺的处境则是较为尴尬，他们目前拿到了37胜29负，只比身后的快船、掘金和爵士多0.5个胜场，如果马刺赢下火箭，他们将会继续保住西部前7的位置。</span>
            </div>
            <div class="comment">
                <span>xixi</span>
                <span>赞~</span>
            </div>
            <div class="comment">
                <span>xixi</span>
                <span>赞~dfdfgkkksds分担分担分担分担浮动</span>
            </div>
            <div class="comment">
                <span>singwa</span>
                <span>《烈火如歌》最近真是吸粉无数，各种话题随随便便就有成千上万的阅读量，本剧的点击量也轻轻松松破了十亿。看来热巴的高颜值和周渝民男神的实力演技，获得了大家的广泛肯...[详情]</span>
            </div>
            <div class="comment">
                <span>xixi</span>
                <span>赞~</span>
            </div>
            <div class="comment">
                <span>xixi</span>
                <span>赞~dfdfgkkksds分担分担分担分担浮动</span>
            </div>
            <div class="comment">
                <span>singwa</span>
                <span>《烈火如歌》最近真是吸粉无数，各种话题随随便便就有成千上万的阅读量，本剧的点击量也轻轻松松破了十亿。看来热巴的高颜值和周渝民男神的实力演技，获得了大家的广泛肯...[详情]</span>
            </div>
            <div class="comment-form">
                <input id="discuss-box" type="text" placeholder="别憋着，说点啥~~ 回车既发射"></input>
            </div>
        </div>
        <div id="match-data" class="hidden match-data">
            <div class="match-score">
                <div class="match-team-info">
                    <img src="./imgs/team1.png" width="40px" height="40px"/>
                    <div>火箭</div>
                </div>
                <div class="match-score-result">
                    <div style="font-size: .8rem;color: red;">第一小节 01：40</div>
                    <div style="font-size: 1.2rem; color:red;">
                        <span>21</span>
                        <span>Live</span>
                        <span>22</span>
                    </div>
                    <div style="font-size: .8rem; color:#888;">NBA常规赛</div>
                </div>
                <div class="match-team-info">
                    <img src="./imgs/team2.png" width="40px" height="40px"/>
                    <div>雷霆</div>
                </div>
            </div>
            <div class="match-report">
                <h3 class="sub-title">赛况</h3>
                <div class="match-report-row row-title">
                    <span>球队</span>
                    <span>1TH</span>
                    <span>2TH</span>
                    <span>3TH</span>
                    <span>4TH</span>
                    <span>总分</span>
                </div>
                <div class="match-report-row">
                    <span><img src="./imgs/team1.png" width="30px" height="30px"/></span>
                    <span>20</span>
                    <span>-</span>
                    <span>-</span>
                    <span>20</span>
                    <span>40</span>
                </div>
                <div class="match-report-row">
						<span>
							<img src="./imgs/team2.png" width="30px" height="30px"/>
						</span>
                    <span>15</span>
                    <span>-</span>
                    <span>-</span>
                    <span>30</span>
                    <span>40</span>
                </div>
            </div>
            <div class="mvp">
                <h3 class="sub-title">本场最佳</h3>
                <div>
                    <div class="mvp-player">
                        <img src="./imgs/pa.png" width="50px;" height="40px"/>
                        <div class="mvp-player-info">
                            <div>9</div>
                            <div>帕克</div>
                        </div>
                    </div>
                    <div class="mvp-score">
                        <span>10</span>
                        <span class="mvp-score-label">得分</span>
                        <span>12</span>
                    </div>
                    <div class="mvp-player">
                        <div class="mvp-player-info">
                            <div>13</div>
                            <div>哈登</div>
                        </div>
                        <img src="./imgs/ha.png" width="50px;" height="40px"/>
                    </div>
                </div>
                <div>
                    <div class="mvp-player">
                        <img src="./imgs/pa.png" width="50px;" height="40px"/>
                        <div class="mvp-player-info">
                            <div>9</div>
                            <div>帕克</div>
                        </div>
                    </div>
                    <div class="mvp-score"><span>10</span><span class="mvp-score-label">助攻</span><span>9</span></div>
                    <div class="mvp-player">
                        <div class="mvp-player-info">
                            <div>3</div>
                            <div>保罗</div>
                        </div>
                        <img src="./imgs/bao.png" width="50px;" height="40px"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        var $nav = $('.tab-nav div');
        var $content = $('.tab-block > div');
        var $back = $('#back');

        /*切换tab*/
        $nav.click(function () {
            var $this = $(this);
            var $t = $this.index();
            $nav.removeClass();
            $this.addClass('active');
            $content.css('display', 'none');
            $content.eq($t).css('display', 'block');
        });

        $back.click(function () {
            window.history.back();
        });
    });
</script>
</body>
</html>